import Icon from 'antd/lib/icon';
import React, {
  Component
} from 'react'

class PictureList extends Component {
	constructor(){
        super();
        this.state = {
            leftDisable: false,
            rightDisable: false,
            leftNum:0,
            rightNum:0
        }
    }

    changeShowImg(index,that) {
        // let aImg = document.querySelectorAll('#ItemList li');
        // aImg[that.props.index].classList.remove('active');
        // aImg[index].classList.add('active');
        that.props.changeMainImg(index)
    }

    ceilNum({Num, accuracy = 0.7}){ //根据精度进位0.7
        return Num >= Math.floor(Num) + accuracy ? Math.floor(Num) + 1 : Math.floor(Num);
    }

    moveImgList(dirction) {
        let tar = this.refs.ItemList;
        let box = this.refs.ListBox;
        let contain = this.refs.ItemBox;
        let boxWidth = contain.offsetWidth; //box的宽度
        let curLeft = parseInt(tar.style.left) || 0; //当前left偏移量（初始是20px,
		let curNum = this.ceilNum({Num:boxWidth / 62}); //计算当前box能容纳多少item
        let firstFlag = false;
        let leftNum = 0;
        
        //可操作性且是第一次
        if(this.props.imageList.length > curNum && this.state.leftNum ==0 && this.state.rightNum == 0) {
            firstFlag = true;
            leftNum = this.props.imageList.length - curNum;
            this.setState({leftNum: leftNum, rightDisable: true})
        }
        if(dirction == 'left') {
            if(firstFlag) {
                this.setState({leftDisable: leftNum-1? false : true, rightDisable: false, leftNum:leftNum-1, rightNum:this.state.rightNum+1});
                tar.style.left = (curLeft - 62)+'px';
                return false;
            }
            if(this.state.leftNum){
                this.setState({leftDisable: this.state.leftNum-1? false : true, rightDisable: false, leftNum:this.state.leftNum-1, rightNum:this.state.rightNum+1});
                tar.style.left = (curLeft - 62)+'px';
            }else {
                this.setState({leftDisable: true})
            }
        }else{
            if(this.state.rightNum) {
                this.setState({rightDisable: this.state.rightNum-1? false : true, leftDisable: false, leftNum:this.state.leftNum+1, rightNum:this.state.rightNum-1});
                tar.style.left = (curLeft + 62)+'px';
            }else {
                this.setState({rightDisable: true})
            }
        }
    }
    //如果要改变图片移动方向，请更改disabled属性和click处理函数
    render() {
        return (<div className="piclist-box" ref={'ListBox'}>
		<button 
			className="left-arrow arrow-btn" 
			disabled={this.state.rightDisable}
			onClick={()=>{this.moveImgList('right',this)}} 
			type="button"><Icon type="left"></Icon></button>
        <button 
	        className="right-arrow arrow-btn" 
	        disabled={this.state.leftDisable} 
	        onClick={()=>{this.moveImgList('left',this)}} 
	        type="button"><Icon type="right"></Icon></button>
	    <div className="img-list"  ref={'ItemBox'} style={{left:-20}}>
			<ul className="img-ul" ref={'ItemList'}>
	            {this.props.imageList.map((item,index) => (
	                <li key={item+index} onClick={() => {this.changeShowImg(index,this)}} className={index == this.props.index ? 'active' : ''}>
	                    <img src={item} alt="img" />
	                </li>
	            ))}
	        </ul>
	    </div>
        
	</div>)
    }

}

export default PictureList